<template>
  <div class="home">
      <el-row>
        <el-button v-if="$store.state.user.type ==0 "  @click="visible=true" >添加用户</el-button>
        <el-button v-if="$store.state.user.type==0" @click="visible_type=true">添加分类</el-button>
      </el-row>
  
      <User v-if="$store.state.user.phone"></User>
      <div v-else class="change_user">
        <el-input v-model="phone" placeholder="请填写手机号"></el-input>
        <el-input v-model="password" placeholder="请输入新密码"> </el-input>
        <el-upload
        class="upload-demo"
        action="http://182.92.156.134:8080/upload"
        name="file"
        :on-success="file_success"
        >
  <el-button size="small" type="primary">点击上传</el-button>
  <img :src="img" v-if="img" alt="">
  
</el-upload>
<el-button @click="changeUser">修改信息</el-button>
      </div>
      <Table :userList="userList" :onDelList="delList">

        <el-table-column
          slot="date"
          label="头像"
          >
          <template slot-scope="scope">
            <div>
                <img width="40" height="40" :src="scope.row.img" alt="">
            </div>
          </template>
        </el-table-column>

      </Table>

      <el-pagination
      background
      layout="prev, pager, next"
      :page-size="limit"
      :current-page="page"
      @current-change="changePage"
      :total="Number(total)">
    </el-pagination>

      <el-dialog
      title="添加用户"
      :visible.sync="visible"
      width="60%"
      >
    
      <AddUser :onChangeVisible="changeVisible" :onGetUserList="get_user_list"></AddUser> 

     
    </el-dialog>
     <el-dialog
     title="添加分类"
     :visible.sync="visible_type"
     width="60%"
      >
      <ClassType :changeVisibleClass="changeVisibleClass"></ClassType>
     
    </el-dialog>
  </div>
</template>

<script>

import AddUser  from "../components/AddUser"
import User from "../components/User"
import ClassType from "../components/ClassType"
import {mapState} from "vuex"
import {getUserList} from "@/api/user"
export default {
  data(){
    return {
      visible_type:false,
      visible:false,
      phone:"",
      img:"",
      password:"",
      page:1,
      limit:5,
      total:"",
      userList:[]
    }
  },
  name: 'Home',
  components:{
    AddUser,
    User,
    ClassType
  },
  computed:{
    ...mapState(["user"])
  },
  async mounted() {
    this.$store.dispatch("getUserInfo",this.user.user_id);
    this.get_user_list()
  },
  methods: {
    changePage(page){

      this.page=page;
      this.get_user_list()
    },
    async get_user_list(){
        let res=  await getUserList(this.page,this.limit);
        this.total = res.total
        this.userList = res.data
    },
    delList(id){
       this.userList = this.userList.filter(item=>item.id!=id)
    },
    changeVisible(){
      this.visible=false
    },
    changeVisibleClass(){
      this.visible_type=false
    },
    file_success(res,file,fileList){
      this.img=res.url
    },
    changeUser(){
      this.$store.dispatch("editor",{
          password:this.password,
         id:this.$store.state.user.user_id,
         phone:this.phone,
         img:this.img}).then(res=>{
           alert("修改成功")
      })
    }
  },
}
</script>

<style scoped>
  .el-row{
    padding:20px;
  }
  .change_user{
    padding: 20px;
  }
  .change_user img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
</style>